<template>
	<u-popup
		v-model="gameShow"
		mode="bottom"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="prop-title">游乐场</view>
			<scroll-view
				scroll-y
				@scrolltolower="scrolltolower"
				class="center">
				<view
					v-for="(val, index) in gameList"
					:key="index"
					class="item">
					<view class="item-box">
						<view class="item-left">
							<image
								:src="val.img"
								mode="widthFix"></image>
						</view>
						<view class="item-center">
							<view>{{ val.title }}</view>
							<view>{{ val.desc }}</view>
						</view>
						<view class="item-right" @click="jump(val)">
							<image
								src="/static/images/chicken/game_btn.png"
								mode="widthFix"></image>
							<text>去玩玩</text>
						</view>
					</view>
					<image
						class="item-bg"
						:src="val.bgImg"
						mode="widthFix"></image>
				</view>
			</scroll-view>
			
			<image
				class="bg"
				src="/static/images/chicken/bg_game.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myFriend',
		props: {
			gameShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				gameList: [
					{
						img: '/static/images/chicken/game_img_1.png',
						title: '找不同',
						desc: '有机会获得道具卡、小鸡饲料',
						bgImg: '/static/images/chicken/game_bg_1.png',
						path: '/pages/game/different/index',
					},
					{
						img: '/static/images/chicken/game_img_2.png',
						title: '宠物赛跑',
						desc: '有机会获得道具卡、小鸡饲料',
						bgImg: '/static/images/chicken/game_bg_2.png',
						path: '/pages/game/running/index',
					},
					{
						img: '/static/images/chicken/game_img_3.png',
						title: '红包雨',
						desc: '有机会获得道具卡、小鸡饲料',
						bgImg: '/static/images/chicken/game_bg_3.png',
						path: '/pages/game/package/index',
					},
					{
						img: '/static/images/chicken/game_img_4.png',
						title: '答题有礼',
						desc: '有机会获得道具卡、小鸡饲料',
						bgImg: '/static/images/chicken/game_bg_4.png',
						path: '/pages/game/question/index',
					},
					{
						img: '/static/images/chicken/game_img_5.png',
						title: '宠物接饲料',
						desc: '有机会获得道具卡、小鸡饲料',
						bgImg: '/static/images/chicken/game_bg_5.png',
						path: '/pages/game/feed/index',
					},
				]
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'gameShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			jump(val) {
				uni.navigateTo({
					url: val.path,
				});
			},
			goOther(val) {
				this.changeShow();
				this.$emit('goOtherFriend', val);
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		min-height: 994rpx;
		background-color: transparent;
		.prop-title {
			position: absolute;
			left: 0;
			top: 190rpx;
			z-index: 1;
			width: 100%;
			font-size: 36rpx;
			font-weight: bold;
			color: #732011;
			text-align: center;
			letter-spacing: 2rpx;
		}
		.center {
			position: absolute;
			left: 0;
			top: 299rpx;
			z-index: 1;
			width: calc(100% - 20rpx);
			height: calc(100% - 299rpx);
			margin-left: 10rpx;
			text-align: center;
			.item {
				position: relative;
				display: flex;
				width: calc(100% - 40rpx);
				margin: 0 0 20rpx 20rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #fff;
				overflow: hidden;
				.item-box {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
					display: flex;
					align-items: center;
					width: 100%;
					padding: 42rpx 32rpx;
					background-color: rgba(#000, .5);
					.item-left {
						width: 76rpx;
						image {
							width: 100%;
						}
					}
					.item-center {
						width: calc(100% - 76rpx - 140rpx);
						padding-left: 16rpx;
						text-align: left;
						view:first-of-type {
							margin-bottom: 20rpx;
							font-weight: 32rpx;
							font-weight: bold;
						}
						view:last-of-type {
							color: rgba(#fff, .6);
						}
					}
					.item-right {
						position: relative;
						image {
							width: 140rpx;
						}
						text {
							position: absolute;
							left: 50%;
							top: 14rpx;
							transform: translateX(-50%);
							width: 100%;
							font-size: 28rpx;
							font-weight: 500;
							color: #fff;
						}
					}
				}
				.item-bg {
					width: 100%;
				}
			}
		}
		.bg {
			width: 100%;
			margin-bottom: -10rpx;
		}
		.close {
			position: absolute;
			right: 30rpx;
			top: 220rpx;
			width: 46rpx;
		}
	}
}
</style>